<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://g.alicdn.com/bizcharts/io-asserts/3.1.2/react16.0.0.production.min.js"></script>
    <script src="https://g.alicdn.com/bizcharts/io-asserts/3.1.2/react-dom16.0.0.production.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
    <script type="text/javascript" src="https://gw.alipayobjects.com/as/g/datavis/assets/1.0.1/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://gw.alipayobjects.com/as/g/datavis/assets/1.0.1/lodash-4.17.4.min.js"></script>
</head>

<body>
    <div id="root">react list 测试</div>
    <script type="text/babel">
        function ListItem(props) {
            // 正确！这里不需要指定 key ：
            return <li>{props.value}</li>;
        }

        function NumberList(props) {
            const numbers = props.numbers;
            const listItems = numbers.map((number) =>
                // 正确！key 应该在这里被指定
                <ListItem key={number.toString()} value={number} />
            );
            console.log(listItems);
            return (
                <ul>
                    {[...listItems]}
                    {/*或者直接{listItems}*/}
                </ul>
            );
        }

        const numbers = [1, 2, 3, 4, 5];
        ReactDOM.render(
            <NumberList numbers={numbers} />,
            document.getElementById('root')
        );
    </script>
</body>

</html>